<template>
    <!-- pages/site/index.wxml -->
    <view class="pages">
        <view class="site mt-20" v-for="(item, index) in List" :key="index">
            <view class="centers">
                <view class="name mr-10">{{ item.name }}</view>
                <view class="phone">{{ item.phone }}</view>
            </view>

            <view class="flexbox-sb mt-10">
                <view class="site-text1">{{ item.province }}{{ item.city }}{{ item.region }}</view>
                <view class="edit" @tap="onEdit" :data-item="item"><van-icon class="icon-24" name="edit" /></view>
            </view>

            <view class="flexbox-sb mt-20">
                <view class="centers" @tap="setDefault" :data-item="item.id">
                    <view :class="'iconbox centers mr-10 ' + (item.receiveStatus ? 'iconbox1' : '')">
                        <image class="icon-24" v-if="item.receiveStatus" :src="imgUrl + 'step33.png'"></image>
                    </view>
                    <text class="site-text2">默认地址</text>
                </view>
                <view class="site-text2" @tap="del" :data-id="item.id">删除</view>
            </view>
        </view>
        <view class="addbtn" @tap="onAdd">
            <text class="site-text3">+</text>
            新增地址
        </view>
    </view>
</template>

<script>
// pages/site/index.js
const app = getApp(); // 引入app

import _request from '../../utils/request.js';
export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            List: [
                {
                    name: '易烊千玺',
                    phone: '13477547036',
                    site: '广东省深圳市坂田国际中心B座1102室意约售后仓库',
                    bool: false,
                    id: '1'
                },
                {
                    name: '机车之王',
                    phone: '13477521226',
                    site: '广东省深圳市坂田国际中心B座1102室意约售后仓库',
                    bool: false,
                    id: '2'
                }
            ]
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.getReceiveAndDeliverAddressByUserId();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.getReceiveAndDeliverAddressByUserId();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 设置默认地址
        setDefault(e) {
            const { id } = e.currentTarget.dataset;
            const { List } = this;
            this.setData({
                List: List.map((item) => {
                    if (item.id == id) {
                        item.bool = true;
                        return item;
                    } else {
                        item.bool = false;
                        return item;
                    }
                })
            });
        },

        // /receiveAndDeliver/getReceiveAndDeliverAddressByUserId
        // 前往新增
        onAdd() {
            uni.navigateTo({
                url: '/pages/site/addsite/index?type=add'
            });
        },

        //删除
        del(e) {
            if (this.List.length === 1) {
                uni.showToast({
                    title: '最少需要一条地址',
                    icon: 'none'
                });
                return;
            }

            let id = e.currentTarget.dataset.id;
            uni.showModal({
                title: '提示',
                content: '确定要删除吗',
                success: (res) => {
                    if (res.confirm) {
                        _request
                            .get(
                                '/receiveAndDeliver/deleteReceiveAndDeliverAddressById',
                                {
                                    id: id
                                },
                                app.globalData.mallType
                            )
                            .then((res) => {
                                if (res.data.code === 200) {
                                    this.getReceiveAndDeliverAddressByUserId();
                                }
                            });
                    } else {
                    }
                }
            });
        },

        // 编辑
        onEdit(e) {
            uni.navigateTo({
                url: '/pages/site/addsite/index?type=edit&data=' + JSON.stringify(e.currentTarget.dataset.item)
            });
        },

        getReceiveAndDeliverAddressByUserId() {
            _request
                .get(
                    '/receiveAndDeliver/getReceiveAndDeliverAddressByUserId',
                    {
                        id: uni.getStorageSync('userId')
                    },
                    app.globalData.mallType
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        this.setData({
                            List: res.data.data.rows
                        });
                    }
                });
        }
    }
};
</script>
<style>
/* pages/site/index.wxss */
.pages {
    padding: 0 20rpx;
}
.site {
    width: 710rpx;
    height: 214rpx;
    background: #ffffff;
    box-shadow: 0px 1px 29px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10rpx;
    padding: 20rpx;
    box-sizing: border-box;
}

.name {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
}

.phone {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #999999;
}

.site-text1 {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 36rpx;
    margin-right: 140rpx;
}

.site-text2 {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 36rpx;
}

.iconbox {
    width: 24rpx;
    height: 24rpx;
    border: 1px solid #999999;
    border-radius: 50%;
}

.iconbox1 {
    border: 1px solid #ff8722;
}

.addbtn {
    width: 670rpx;
    height: 90rpx;
    background: #ff8722;
    border-radius: 45rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #f3f3f3;
    line-height: 90rpx;
    text-align: center;
    margin: 300rpx 20rpx 0 20rpx;
}

.site-text3 {
    line-height: 90rpx;
    font-size: 40rpx;
    margin-right: 10rpx;
}
</style>
